<template>
  <div class="pay-result">
    <BackNavigation v-bind:title-info="titleInfo"/>
    <div class="pay-result-title">
      <img v-bind:src="orderInfo.status !== 1 ? require('../../assets/img/payment/pay_result_failure.png') : require('../../assets/img/payment/pay_result_sucess.png')" alt="">
      <p class="pay-result-title-text">{{ orderInfo.status !== 1 ? '支付失败' : '支付成功' }}</p>
      <p>订单编号：{{ orderInfo.id }}</p>
      <p>支付金额：¥{{ orderInfo.price }}</p>
    </div>
    <div class="pay-result-input">
      <input type="button" class="home-input" value="返回首页" @click="goHome">
      <input type="button" class="detail-input" value="查看订单" @click="goOrderDetail">
    </div>
  </div>
</template>

<script>
  import { getUrlParamsObject } from '../../assets/base/base'
  import * as recommend from 'api/recommend'
  import BackNavigation from '../mine/navigation.vue'

  export default {
    name: 'pay-result',
    components: {
      BackNavigation
    },
    data () {
      return {
        titleInfo: {
          leftTitle: '返回',
          title: '支付结果',
          rightTitle: ''
        },
        orderInfo: {
          id: '',
          price: 0.00,
          status: 0
        }
      }
    },
    computed: {
      getParamsObj () {
        return getUrlParamsObject(window.location.href)
      }
    },
    methods: {
      goHome () {
        this.$router.push('/')
      },
      goOrderDetail () {
        let self = this
        this.$router.push({
          path: 'orderDetial',
          query: {
            orderId: self.orderInfo.id
          }
        })
      }
    },
    created () {},
    activated () {
      let params = {
        orderId: getUrlParamsObject(window.location.href).orderId,
        callbackUrl: '/pay_result'
      }
      recommend.payOrderStatusCheck(params).then(resault => {
        this.$indicator.close()
        this.nullShow = true
        if (resault.status === 200 && resault.data.data !== null) {
          console.log(resault.data.data)
          this.orderInfo.id = resault.data.data.orderId
          this.orderInfo.price = resault.data.data.totalFee
          this.orderInfo.status = resault.data.data.status
          console.log(this.orderInfo)
        } else {
          alert(resault.data)
        }
      }).catch(resault => {
        this.$indicator.close()
        this.nullShow = true
        console.log(resault)
      })
    }
  }
</script>

<style lang="scss">
  div.pay-result {
    padding-top: 44px;
    position: relative;
    overflow: scroll;
    height: auto;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
    /*background-color: greenyellow;*/

    >div.pay-result-title {
      padding: 0 15px 0 15px;
      width: 100%;
      height: auto;
      /*background-color: orange;*/

      >img {
        margin: 10px 0 10px 0;
        height: 70px;
        max-width: 100%;
      }

      >p {
        margin-bottom: 10px;
        color: rgb(66, 66, 66);
        font-size: 14px;
        text-align: left;
        /*font-weight: bold;*/
      }

      >p.pay-result-title-text {
        text-align: center;
        font-weight: bold;
      }
    }

    >div.pay-result-input {
      padding: 0 15px 0 15px;
      width: 100%;
      height: 44px;
      background-color: transparent;

      >input {
        /*margin-right: 10%;*/
        /*float: left;*/
        outline: none;
        font-size: 14px;
        width: 45%;
        height: 44px;
        border-radius: 5px;
        -webkit-appearance: none;
        border: 1px solid rgb(66, 66, 66);
      }

      >input.home-input {
        float: left;
        /*border-color: rgb(233, 233, 233);*/
        /*border: 1px solid rgb(66, 66, 66);*/
        background-color: white;
      }
      >input.detail-input {
        color: white;
        border: 0 solid transparent;
        background-color: rgb(27, 162, 232);
        float: right;
      }
    }
  }
</style>
